<template>
  <div id="regis-div">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="auto" style="width: 40%; margin: 0 auto;">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword" placeholder="请确认密码"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input style="width: 50%;align-content: center" v-model="form.phone" placeholder="请输入手机号"/>
      </el-form-item>
      <div>
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import api from "../api";

export default {
  data() {
    return {
      form: {
        userName: '',
        password: '',
        confirmPassword: '',
        email: '',
        phone: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },

      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: this.validateConfirmPassword, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入Email', trigger: 'blur'},
          {type: 'email', message: '请输入正确的Email地址', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入Phone', trigger: 'blur'}
        ]
      }
    }

  },


  mounted() {
    //渲染完调用
  },
  created() {
    //创建完调用
  },
  methods: {
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.form.password !== this.form.confirmPassword) {
            this.$message({
              message: '密码不一致',
              type: 'error',
              position: 'top-right' // 设置消息提示的位置为右上角
            });
            return;
          }

          api.sendRegister(this.form).then((response) => {
            if (response.data.code === 200) {
              this.$message({
                message: '注册成功',
                type: 'success',
                position: 'top-right'
              });
              console.log(response);
              // this.$router.push({name: 'LoginView'})
            } else {
              this.$message({
                message: response.data.message,
                type: 'error',
                position: 'top-right'
              });
            }
          }).catch((error) => {
            console.error(error);
            this.$message({
              message: '注册失败',
              type: 'error',
              position: 'top-right'
            });
          });

          this.$message({
            message: 'submit!',
            position: 'top-right'
          });
        } else {
          this.$message({
            message: '表单验证失败',
            type: 'error',
            position: 'top-right'
          });
          return false;
        }
      });
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning',
        position: 'top-right'
      });
    },
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请确认密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    }
  }
}
</script>

<style scoped>

#regis-div {
  width: 60%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  backdrop-filter: blur(5px);
  position: relative; /* 确保子元素的绝对定位相对于这个div */
}

</style>
